<!DOCTYPE html>
<html>
  <head>
    <title>test.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/test.js"></script>
    <link rel="stylesheet" href="css/test.css">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
   
     <!-- html部分 -->

	<!-- mask -->
    <div id="mask"></div>
    <!-- /mask -->
    <!-- 登录表单 -->
    <div class="login-form">
        <div class="close" id="close-login">X</div>
        <h3>管理员登录</h3>
        <input type="text" name="username" placeholder="账号" id="username">
        <input type="password" name="password" placeholder="密码" id="password">
        <button class="login-btn" id="login">登 录</button>
    </div>
    <!-- /登录表单 -->
    <!-- 头部 -->

<input class="attention" type="button" onclick=""value="管理员登录" id="atten-btn">


<script type="text/javascript">
//让按钮反应的代码这里用到了js

 // fadeModal();//显示登录框
     window.onload = function(){
     var atten = document.getElementById("atten-btn");
     atten.onclick = function fadeModal() {
      var mask = document.getElementById('mask');
      console.log(mask);
      mask.style.display = "0";
      var loginForm = document.getElementsByClassName('login-form')[0];
      console.log(loginForm);
      loginForm.style.display = "block";
   }
//关闭窗口
      var close= document.getElementById("close-login");
   close.onclick =function fadeOutLogin() {
      var mask = document.getElementById('mask');
      console.log(mask);
      mask.style.display = "none";
      var loginForm = document.getElementsByClassName('login-form')[0];
      console.log(loginForm);
      loginForm.style.display = "none";

   }
}
</script>      
  </body>
</html>
